<template>
  <view class="box">
    <view class="cont"> </view>
    <view class="content">
      <view class="content_left">
        <view class="contenmenfen">
          <image
            src="../../image/saoma.png"
            style="width: 50px; height: 50px"
            @click="rint"
          ></image>
          <input
            type="search"
            confirm-type="search"
            value=""
            class="inputfuwc"
            placeholder=" 条码/无码商品价格(0~1000)"
          />
        </view>
        <view class="sidebar" :style="'height:' + (height - 55) + 'px'">
          <view class="side" :style="'height:' + (height - 185) + 'px'">
            <scroll-view class="menu-Cart" scroll-y="true">
              <view ref="menuCart" style="width: 100%">
                <view
                  class="menuCart"
                  v-for="(item, index) in Cart"
                  :key="index"
                >
                  <image :src="item.img" class="cartimg"></image>
                  <view class="text">
                    <text>{{ item.name }}</text>
                    <text>{{ item.id }}</text>
                    <text>￥{{ item.price }}</text>
                  </view>
                  <view class="tity">
                    <view class="bon" @click="derquantity(item)">-</view>
                    <input
                      type="number"
                      maxlength="3"
                      v-model="item.quantity"
                      @input="inputCart(item)"
                    />
                    <view class="bon" @click="addquantity(item)">+</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="Shopping_Cart">
            <view class="orderstowed">
              <view class="stowed" @click="cancellation">
                <image
                  src="../../image/zhengdan.png"
                  mode=""
                  style="width: 40px; height: 40px"
                ></image>
                <text>整单取消</text>
                <text class="allcount">{{ Cart.length }}</text>
              </view>
              <view class="stowed" @click="hanging">
                <image
                  src="../../image/dingdab.png"
                  style="width: 40px; height: 40px"
                  mode="widthFix"
                ></image>
                <text>挂单</text>
                <text class="allcount">{{ order.length }}</text>
              </view>
            </view>
            <view class="totalprice">
              <text style="flex: 3">收款</text>
              <text style="flex: 2">{{ getAllPrice }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="content_row" :style="'height:' + height + 'px'">
        <scroll-view class="menu-wrapper" scroll-x="true">
          <view ref="menuWrapper" style="display: flex">
            <view
              class="menuWrappercent"
              v-for="(item, index) in goods"
              :key="index"
              ref="menuList"
              @click.stop="select(index, item.Name, item.Id)"
            >
              <view
                class="menu-item"
                :class="{ current: currentIndex == index }"
              >
                {{ item.Name }}
              </view>
            </view>
          </view>
        </scroll-view>
        <scroll-view
          class="foods-wrapper"
          scroll-y
          :style="'height:' + (height - 50) + 'px'"
        >
          <view ref="foodsWrapper" class="foodsWrapper">
            <view
              class="food"
              v-for="(food, index) in goodslist"
              :key="index"
              @click="addShopping(food)"
            >
              <view class="food-infoce">
                <image :src="food.img" class="imgmiuc"></image>
              </view>
              <view class="food-info">
                <text style="font-size: 15px; margin-top: 2px">{{
                  food.name
                }}</text>
                <view class="food-itew">
                  <text style="font-size: 13px; margin: 2px 0">{{
                    food.description
                  }}</text>
                  <view class="food-btm">
                    <text class="food-price">￥{{ food.price }}</text>
                    <view class="food_text" v-if="food.stock == 0">
                      <text>已售罄</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      Cart: [],
      goods: [],
      goodslist: [],
      height: 0,
      currentIndex: 0,
      userKey: "",
      getAllPrice: "0.00",
      //挂单数组
      order: [],
    };
  },
  onLoad(option) {
    this.height = Number(uni.getSystemInfoSync().windowHeight) - 50;
    this.userKey = option.userKey;
    this.getdncey(option.userKey);
  },
  //列表获取
  methods: {
    getdncey(key) {
      uni.request({
        url: "/api/ShopBranchSubmitOrder/GetShopCategories?",
        method: "GET",
        data: {
          userKey: key,
        },
        success: (res) => {
          this.goods = res.data.Category;
          console.log(this.goods);
          this.select(0, res.data.Category[0].Name, res.data.Category[0].Id);
        },
      });
    },
    //添加物品进购物车列表
    addShopping(list) {
      let a;
      this.Cart.forEach((tec) => {
        if (tec.id == list.id) {
          a = 0;
          return (a = 1);
        }
      });
      if (a != 1) {
        if (list.stock > 0) {
          list.quantity = 1;
          this.Cart.push(list);
        }
      } else {
        for (let i = 0; i < this.Cart.length; i++) {
          if (this.Cart[i].id == list.id) {
            if (this.Cart[i].quantity == this.Cart[i].stock) {
              uni.showToast({
                title: "己剩库存" + this.Cart[i].stock,
                icon: "none",
                position: "",
              });
            } else {
              this.Cart[i].quantity++;
            }
          }
        }
        this.$forceUpdate();
        // console.log(this.Cart)
      }
      this.totalp();
    },
    //添加数量
    addquantity(item) {
      if (item.quantity == item.stock) {
        uni.showToast({
          title: "己剩库存" + item.stock,
          icon: "none",
          position: "",
        });
      } else {
        item.quantity++;
        this.Cart.forEach((food) => {
          if (item.id == food.id) {
            food.quantity = item.quantity;
          }
        });
        this.$forceUpdate();
        this.totalp();
      }
    },
    //删减商品数量
    derquantity(item) {
      if (item.quantity > 1) {
        item.quantity--;
        this.Cart.forEach((food) => {
          if (item.name == food.name) {
            food.quantity = item.quantity;
          }
        });
        this.$forceUpdate();
        this.totalp();
      }
    },
    //取消订单
    cancellation() {
      let that = this;
      uni.showModal({
        title: "是否取消订单",
        success(res) {
          if (res.confirm) {
            that.Cart = [];
          } else if (res.cancel) {
            console.log("用户点击了取消");
          }
        },
      });
    },
    //挂单
    hanging() {
      let that = this;
      that.order.push(that.Cart);
      that.Cart = [];
      console.log(that.order);
    },
    rint() {
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
    },
    totalp() {
      this.getAllPrice = 0;
      for (let i = 0; i < this.Cart.length; i++) {
        this.getAllPrice += this.Cart[i].quantity * this.Cart[i].price;
      }
      console.log(this.getAllPrice);
      this.getAllPrice = this.getAllPrice.toFixed(2);
      console.log(this.getAllPrice);
    },

    //分类数据获取
    select(index, name, id) {
      this.goods.forEach((item) => {
        if (item.name === name) {
          this.list = item;
        }
      });
      this.currentIndex = index;
      if (id != "") {
        uni.request({
          url: "/api/ShopBranchSubmitOrder/GetShopBranchProducts?",
          method: "GET",
          data: {
            userKey: this.userKey,
            cid: id,
            pageNo: 1,
            pageSize: 10,
          },
          success: (res) => {
            console.log(res.data.products);
            this.goodslist = res.data.products;
          },
        });
      } else {
        this.goodslist = [];
      }
    },
  },
};
</script>

<style>
.box {
  background-color: #e2e2e2;
}

.cont {
  width: 100%;
  height: 50px;
  background-color: #333333;
}

.content {
  display: flex;
}

.content_left {
  flex: 1;
}

.sidebar {
  display: flex;
  margin-top: 5px;
  flex-direction: column;
  background-color: #fff;
}
.side {
  display: flex;
  background-color: #fff;
}

.contenmenfen {
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #0055ff;
}

.cartimg {
  width: 10vh;
  height: 10vh;
}

.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
}

.tity {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menuCart {
  width: 100%;
  display: flex;
  height: 10vh;
  background-color: #f5f5f5;
  margin-bottom: 5px;
}

.Shopping_Cart {
  position: relative;
  bottom: 0;
  left: 2.5%;
  width: 95%;
  height: 130px;
  border-radius: 20rpx;
}
.orderstowed {
  display: flex;
  align-items: auto;
  /* color: #FFFFFF; */
  height: 60px;
  font-size: 20px;
  justify-content: space-between;
  line-height: 60px;
  margin-bottom: 5px;
}
.allcount {
  display: inline-block;
  padding: 0 4px;
  font-size: 9px;
  line-height: 16px;
  font-weight: 400;
  border-radius: 50%;
  background-color: #f01414;
  color: #ffffff;
}
.stowed {
  width: 50%;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  border: #c8c7cc 1px solid;
  box-shadow: 0px 2px 4px #c8c8c8;
}
.totalprice {
  display: flex;
  align-items: auto;
  color: #ffffff;
  font-size: 30px;
  justify-content: center;
  background-color: #4cd964;
  line-height: 65px;
}

.bon {
  width: 20px;
  height: 20px;
  border: 1px solid #007aff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
}

.content_row {
  flex: 2;
}

.menu-wrapper {
  width: 100%;
  height: 50px;
}

.inputfuwc {
  width: 80%;
  height: 35px;
  border-radius: 10px;
  background-color: #ffff;
  background-image: url(../../image/soushuo.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 98% 7px;
}

.bntfuw {
  width: 50px;
  height: 35px;
  background-color: #ffff;
}

.menuWrappercent {
  width: 100%;
  color: #ffffff;
}

.menu-item {
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #0055ff;
}

.current {
  position: relative;
  z-index: 0;
  background-color: #0000ff;
  color: #ffffff;
  left: 1px;
  top: 1px;
}

.foods-wrapper {
  /* margin-left: 4px; */
  height: 100%;
  width: 100%;
}

.foodsWrapper {
  display: flex;
  flex-wrap: wrap;
}

.food {
  flex: 0 0 33%;
  /* width: 200px; */
  display: flex;
  margin: 5px;
  background-color: #ffffff;
  border-radius: 10px;
}

.food-infoce {
  flex: 1;
  height: 100px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.food-infoce > image {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.food-info {
  flex: 2;
  /* justify-content: flex-end; */
}

.food-btm {
  display: flex;
  flex-direction: column;
}
</style>
